<template>
  <div style="display: flex;flex-direction: column;background: white">
    <div class="product-container">
      <div class="product">
        <div class="product-detail"
             v-for="product,index in productList">
          <span style="color: #42578E;font-size: 15px;font-weight: bold">{{product.feature}}</span>
          <span style="color: #E16A53;font-size: 23px;font-weight: normal;margin-top: 5px">{{product.rateRange}}</span>
          <span style="color: #8A919C;font-size: 12px;font-weight: normal">年利率</span>
          <span style="color: #42578E;font-size: 15px;margin-top: 4px">{{product.name}}</span>
        </div>
      </div>
    </div>
    <span style="justify-content: center;text-align: center;padding: 8px;color:#3399EB;font-size: 14px;margin-left: -15px">查看更多</span>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    props: ['productList'],
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

  .product-container {
    display: flex;
    flex-direction: column;
  }

  .product-container::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #F8F8F8;
    /*background: red;*/
    position: relative;
  }

  .product {
    display: flex;
    flex-direction: row;
  }

  .product-detail {
    display: flex;
    flex-direction: column;
    margin: 4px;
    flex: 1;
    padding-top: 4px;
    text-align: center;
  }

  .product::after{
    content: "";
    display: block;
    width: 1px;
    height: 90px;
    left: -50%;
    top:18px;
    background: #F5F5F5;
    position: relative;
  }
</style>
